<template>
	<view>
		<view class="navigation" style="height: 44px;background-color: #fff;"></view>
		
		<!-- 导航栏 -->
		<view class="content">
		    <!-- 距离顶部的距离 刚好留出状态栏即可 即statusBarHeight -->
		    <view class="topNav" :style="{height:navHeight+'px',paddingTop:statusBarHeight+'px'}">
				<view class="nav-left" @tap="goToBack">
					<up-icon name="arrow-left"  size="22"></up-icon>
				</view>
				<view class="nav-center">
					删除线索
				</view>
				
		    </view>
		</view>
		
		<!-- 查询 -->
		<view class="search">
			<view class="input">
				<up-search placeholder="搜索线索姓名/手机号" v-model="searchFor" shape="share" :showAction="false"
					class="seach_input" @change="startSearch()"></up-search>
			</view>
			<view class="arcoDesign" @tap="optionClue">
				<image src="/static/imgs/clueManage/arcoDesign-filter.png" mode="" style="width: 36rpx;height: 36rpx;opacity: .4;"></image>
				<text style="margin-left: 10rpx;margin-right: 10rpx;">筛选</text>
			</view>
		</view>
		
		<view class="radio">
			<label><radio :checked="isChecked" @click="changRadio" style="transform: scale(0.8);" />全选</label>
		</view>
		
		<!-- 内容 -->
		<view class="tabsData">
			
			<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" v-if="tableData.length != 0">
				<!-- <up-card :show-head='false' v-for="item in tableData" :key="item.customerId" style="margin:10rpx 30rpx ;">
					<template #body> -->
						<view class="tableDataItem" v-for="item in tableData" :key="item.customerId">
							<view style="display: inline-block;">
								<label><radio :checked="isSelected(item.customerId)" @tap="checkedItem(item.customerId)"style="transform: scale(0.8);" /></label>
							</view>
							<view class="cardBody">
								<view class="cardBodyTop">
									<view class="cardBodyTopLeft">
										<view class="infoName">
											{{item.name}}
										</view>
										<view class="infoGrade">
											<up-tag text="A" plain size="mini" type="error" v-if="item.ranks=='A'"></up-tag>
											<up-tag text="B" plain size="mini" plainFill v-if="item.ranks=='B'"></up-tag>
											<up-tag text="C" plain size="mini" type="warning"v-if="item.ranks=='C'"></up-tag>
											<up-tag text="D" plain size="mini" type="info" v-if="item.ranks=='D'"></up-tag>
										</view>
										<view class="infoSource">
											<up-tag :text="item.source" plain size="mini" type="success" plainFill></up-tag>
										</view>
									</view>
									<view class="cardBodyTopRight" :style="{'color':progressNameColor(item.progressName)}">
										{{item.progressName}}
									</view>
								</view>
								<view class="cardBodyCenter">
									<view style="display: inline-block;width: 55%;">
										联系方式1：{{item.phoneFirst}}
									</view>
									<view style="display: inline-block;width: 45%;text-align: right;" v-if="isAllot == 1">
										跟进人：{{item.followName}}
									</view>
								</view>
								<view class="cardBodyBottom">
									<view class="classTime">
										届次：{{item.classTime}}
									</view>
									<view class="college">
										院校：{{item.college}}
									</view>
								</view>
							</view>
						</view>
						
					<!-- </template>
				</up-card> -->
				
			</scroll-view>
			<view class="" v-else>
				<view class="noData">
					<image src="/static/imgs/myClue/noData.png" mode="" style="max-height: 100%;max-width: 100%;"></image>
				</view>
			</view>
			<u-pagination v-show="isShowPages" :current-page="currentPage" :page-size="pageSize" :total="total" :hideOnSinglePage="true" layout="prev, pager, next"  @current-change="handleCurrentChange" style="margin:20rpx 30rpx 0;" />
			<view class="submit" v-if="tableData.length !== 0">
				<view class="left">
					已选择：{{selectedArr.length}}
				</view>
				<view class="right">
					<up-button text="确认删除" color="linear-gradient(to right, rgb(222,134,143), rgb(189,49,36))" @tap="showDel"></up-button>
				</view>
			</view>
			
			<up-popup v-model:show="isShow" mode="center"  :round="20">
				<view style="width: 400rpx;height: 200rpx;position: relative;">
					<view  style="width: 100%;height: 70%;position: absolute;top: 50%;transform: translateY(-50%);text-align: center;">
						<text>确定要删除此线索吗？</text>
						<up-button text="确认删除" color="linear-gradient(to right, rgb(222,134,143), rgb(189,49,36))" @tap="submitDel" style="width: 60%;margin-top: 10rpx;border-radius: 20rpx;"></up-button>
					</view>
				</view>
			</up-popup>
			
			<!-- 筛选 -->
			<up-popup v-model:show="showOptions" mode="right" :customStyle="{'width':'650rpx','padding-top':'44px'}">
				<view>
					<view class="progress">
						<view style="font-size: 30rpx;" v-if="isAllot == 1">流程进展</view>
						<view v-if="isAllot == 1">
							<view v-for="item in progressArray" :key="item.progressId" style="display: inline-block;width: 30%;margin:10rpx 0 0 10rpx;border: 1px solid #ccc;">
								<up-button :text="item.progressName" :type="includeProgress(item.progressId)" @tap="selectProgress(item.progressId)"></up-button>
							</view>
						</view>
					</view>
					<up-divider v-if="isAllot ==1"></up-divider>
					<view class="progress">
							<view style="font-size: 30rpx;">客户来源</view>
							<view>
								<view v-for="item in actionsSource" :key="item.name" style="display: inline-block;width: 30%;margin:10rpx 0 0 10rpx;border: 1px solid #ccc;">
									<up-button :text="item.name" :type="includeSource(item.name)" @tap="selectSource(item.name)"></up-button>
								</view>
							</view>
						</view>
						<up-divider></up-divider>
						<view class="progress" >
							<view style="font-size: 30rpx;">客户等级</view>
							<view style="margin-top: 10rpx;">
								<view class="gradeItem">
									<up-button text="A" :type="includeGrade('A')" @tap="selectGrade('A')"></up-button>
								</view>
								<view class="gradeItem">
									<up-button text="B" :type="includeGrade('B')" @tap="selectGrade('B')"></up-button>
								</view>
								<view class="gradeItem">
									<up-button text="C" :type="includeGrade('C')" @tap="selectGrade('C')"></up-button>
								</view>
								<view class="gradeItem">
									<up-button text="D" :type="includeGrade('D')" @tap="selectGrade('D')"></up-button>
								</view>
							</view>
						</view>
						<up-divider></up-divider>
						<view class="progress">
							<view style="font-size: 30rpx;">学校</view>
							<view style="margin-top: 10rpx;">
								 <up-input placeholder="请输入学校名称" v-model="schoolName"  border="surround" style="margin-right: 24rpx;"></up-input>
							</view>
						</view>
						<up-divider></up-divider>
						<view class="progress" style="display: flex;align-items: center;justify-content: space-between;margin-right: 30rpx;">
							<view style="font-size: 30rpx;">届次</view>
							<view  @tap="showClassTime = true">
								 <text :style="{'color': classTimes == '请选择'? ' rgba(190,190,190,1)': ''}" >{{classTimes}}</text>
								 <text style="margin-left: 20rpx;color:rgba(190,190,190,1)">></text>
							</view>
						</view>
						<up-divider></up-divider>
						<view class="progress" style="display: flex;align-items: center;justify-content: space-between;margin-right: 30rpx;" v-if="!(roleAuthority =='StoreStaff' ) && isAllot == 1">
							<view style="font-size: 30rpx;">跟进人</view>
							<view @tap="showStaff = true">
								 <text :style="{'color': staff == '请选择'? ' rgba(190,190,190,1)': ''}" >{{staff}}</text>
								 <text style="margin-left: 20rpx;color:rgba(190,190,190,1)">></text>
							</view>
						</view>
						<up-divider v-if="!(roleAuthority =='StoreStaff' )&& isAllot == 1"></up-divider>
					</view>
				<view style="display: flex;align-items: center;position: absolute;bottom: 10rpx;width: 100%;">
					<up-button text="重置" style="width: 50%;" @tap="resetOptions"></up-button>
					<up-button text="确认" color="linear-gradient(to right, rgb(147,210,243), rgb(64,149,229))" style="width: 50%;" @tap="submitOptions"></up-button>
				</view>
			</up-popup>
			
			<!-- 届次选择 -->
			<up-action-sheet :show="showClassTime" :actions="actionsClassTime" title="请选择届次" 
				@close="showClassTime = false" @select="classTimeSelect" wrapMaxHeight="600rpx" >
			</up-action-sheet>
			
			<!-- 跟进人选择 -->
			<up-action-sheet :show="showStaff" :actions="actionsStaff" title="请选择跟进人" 
				@close="showStaff = false" @select="staffSelect" wrapMaxHeight="600rpx" >
			</up-action-sheet>
				
			
		</view>
	</view>
</template>

<script setup>
	import { ref,reactive, onMounted } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import { cemCustomerInfoFindCustomerManageList,cemCustomerInfoDelCustomer,userFindBusinessUser} from '../../utils/clue';
	let navHeight = ref('');// 导航栏高度
	let statusBarHeight = ref('');// 状态栏高度
	
	// 根据流程进展返回字体颜色
	let progressNameColor = (val) => {
		if(val == '未沟通'){
			return 'rgb(255,115,115)'
		}else if(val == '一次进店' || val == '二次进店' || val == '多次进店' || val == '已通话' || val == '已加微信'){
			return 'rgb(254,135,53)'
		}else if(val == '服务中' ||val == '已成交' ||val == '完成服务'){
			return 'rgb(13,170,247)'
		}
	}
	
	// ============== 全选与反选 ==============//
	// 是否全选
	const isChecked = ref(false);
	
	// 改变全选按钮状态
	let changRadio = (n) => {
	  isChecked.value = !isChecked.value
	  checkedAll()
	};
	
	// 被选择的数组
	const selectedArr = ref([])
	
	// 是否被选择
	let isSelected = (val)=>{
		if(selectedArr.value.indexOf(val)<0){
			return false
		}else{
			return true
		}
	}
	
	// 选择全部
	let checkedAll = ()=>{
		selectedArr.value.splice(0,selectedArr.value.length)
		if(isChecked.value){
			for(let i =0;i<tableData.value.length;i++){
				if(selectedArr.value.indexOf(tableData.value[i].customerId)<0){
					selectedArr.value.push(tableData.value[i].customerId)
				}
			}
		}
	}
	
	// 选择某一个
	let checkedItem = (val)=>{
		if(selectedArr.value.indexOf(val)<0){
			selectedArr.value.push(val)
		}else{
			selectedArr.value.splice(selectedArr.value.indexOf(val),1)
		}
		if(selectedArr.value.length == tableData.value.length){
			isChecked.value = true
		}else{
			isChecked.value = false
		}
	}
	
	// ============== 查询 ==============//
	// 要查询的内容
	let searchFor = ref('')
	// 客户姓名
	let customerName = ref('')
	// 客户手机号
	let customerPhone = ref('')
	
	let startSearch = ()=>{
		// 正则表达式判断汉字
		const isChinese = /^[\u4e00-\u9fa5]+$/.test(searchFor.value);
		// 正则表达式判断数字
		const isNumber = /^\d+$/.test(searchFor.value); 
		
		if(searchFor.value == ''){
			customerName.value= '';
			customerPhone.value = '';
			pageChange(1); 
		}else{
			if (isChinese) {
				customerName.value = searchFor.value;
				pageChange(1); 
			} else if (isNumber) {
				customerPhone.value = searchFor.value
				if(customerPhone.value.length == 11){
					pageChange(1); 
				}
			} else {
				uni.showToast({
					title: '请正确输入内容',
					icon: 'error',
					duration: 2000
				})
				searchFor.value = ''
				pageChange(1); 
			}
		}
	}
	
	// 返回
	let goToBack = ()=>{
		uni.redirectTo({
			url:'/pages/clueManage/clueManage'
		})
	}

	// ============== 获取线索数据 ==============//
	//表格的数据
	const tableData = ref([])
	  
	// 分页
	let isShowPages = ref(false)
	let currentPage = ref(1)
	let pageSize = ref(15)
	let total = ref(0)
	
	let handleCurrentChange = (val)=>{
		isChecked.value = false
		pageChange(val)
	}
	
	let pageChange = (val) =>{
		currentPage.value = val
		const params = {
			businessId:uni.getStorageSync('businessId'),
			isAllot:isAllot.value,
			isClient: 1,
			pageNumber: currentPage.value,
			pageSize: pageSize.value,
			name: customerName.value,
			phoneFirst: customerPhone.value,
			college:schoolName.value,
			classTime:classTimes.value == '请选择'?null:classTimes.value,
			followId:staff.value== '请选择'?null:staffArray.value.filter(item=>item.name == staff.value)[0].userId,
			progressIds:progressOptions.value.length == 0?null:progressOptions.value.join(','),
			sources:sourceOptions.value.length == 0?null:sourceOptions.value.join(','),
			rankTwo:gradeOptions.value.length == 0?null:gradeOptions.value.join(','),
		}
		
		if (progressOptions.value.length == 0) {
		    delete params.progressIds;
		}
		if (sourceOptions.value.length == 0) {
		    delete params.sources;
		}
		if (gradeOptions.value.length == 0) {
		    delete params.rankTwo;
		}
		
		uni.showLoading({
			title:'正在加载',
			mask:true
		})
		cemCustomerInfoFindCustomerManageList(params).then(res=>{
			if(res.code == 200){
				tableData.value = [];
				tableData.value = res.data.records;
				total.value = res.data.total
				checkedAll()
				if(res.data.records.length == 0){
					isShowPages.value = false
					uni.showToast({
						title: '暂无数据',
						icon: 'error',
						duration: 2000
					})
				}else{
					isShowPages.value = true
				}
				uni.hideLoading()
			}
		})
	}
	
	// 获取路由判断是删除未分配线索还是已分配线索
	let pagesPath = getCurrentPages();
	let isAllot = ref(0)
	
	let isShow = ref(false)
	
	// 确认删除
	let showDel = ()=>{
		if(selectedArr.value.length == 0){
			uni.showToast({
				title: '请选择线索',
				icon: 'error',
				duration: 2000
			})
		}else{
			isShow.value = true
		}
	}
	
	let submitDel = ()=>{
		cemCustomerInfoDelCustomer(selectedArr.value).then(res=>{
			if(res.code  == 200){
				uni.showToast({
					title: '删除成功',
					icon: 'error',
					duration: 2000
				})
				setTimeout(function(){
					uni.redirectTo({
						url:'/pages/clueManage/clueManage'
					})
				},2000)
				isShow.value = false
			}
		})
	}
	
	//===========获取本店的员工字典=============//
	let staffArray = ref([])
	
	let getStaffArray = ()=>{
		userFindBusinessUser({
			  businessId: uni.getStorageSync('businessId')
		}).then((res) => {
			// console.log(res.data)
			staffArray.value = [];
			staffArray.value = res.data;
			for(let i=0;i<res.data.length;i++){
				actionsStaff.value.push({
					name:res.data[i].name
				})
			}
		})
	}
	
	onShow(()=>{
		pageChange(1)
		getStaffArray()
	})
	
	onMounted(()=>{
		let {
		        statusBarHeights,
		        system// 机型
		      } = uni.getSystemInfoSync()
		      // 注意返回的单位是px 不是rpx
		      // 而导航栏的高度则 = 状态栏的高度 + 判断机型的值（是ios就+40，否则+44）
		      // 这个高度刚好和胶囊对齐
			  statusBarHeight.value = statusBarHeights
		      navHeight.value = statusBarHeights + (system.indexOf('iOS') > -1 ? 40 : 44)
	})
	
	//===========筛选=============//
	// 流程字典
	let progressArray = ref([])
	progressArray.value = uni.getStorageSync('progressArray')
	// 角色权限
	let roleAuthority = ref('')
	roleAuthority.value = uni.getStorageSync('roleAuthority')
	
	const showOptions = ref(false)
	
	// 流程进展选项
	let progressOptions = ref([])
	
	let includeProgress = (val)=>{
		if(progressOptions.value.indexOf(val) < 0 ){
			return ''
		}else{
			return 'primary'
		}
	}
	
	let selectProgress = (val) => {
		if(progressOptions.value.indexOf(val) < 0 ){
			progressOptions.value.push(val)
		}else{
			progressOptions.value.splice(progressOptions.value.indexOf(val),1)
		}
	}
	
	// 客户来源选项
	let sourceOptions = ref([])
	
	let includeSource = (val)=>{
		if(sourceOptions.value.indexOf(val) < 0 ){
			return ''
		}else{
			return 'primary'
		}
	}
	
	let selectSource = (val) => {
		if(sourceOptions.value.indexOf(val) < 0 ){
			sourceOptions.value.push(val)
		}else{
			sourceOptions.value.splice(sourceOptions.value.indexOf(val),1)
		}
	}
	
	// 客户等级选项
	let gradeOptions = ref([])
	
	let includeGrade = (val)=>{
		if(gradeOptions.value.indexOf(val) < 0 ){
			return ''
		}else{
			return 'primary'
		}
	}
	
	let selectGrade = (val) => {
		if(gradeOptions.value.indexOf(val) < 0 ){
			gradeOptions.value.push(val)
		}else{
			gradeOptions.value.splice(gradeOptions.value.indexOf(val),1)
		}
	}
	
	
	let optionClue = ()=>{
		showOptions.value = true
	}
	
	
	
	// 客户来源
	const actionsSource = ref([  
		{ name: '资源置换' },
		{ name: '老客户转介绍' },
		{ name: '机构推荐' },
		{ name: '自然流量' },
		{ name: '直播获客' },
		{ name: '流量中心获客' },
		{ name: '共享合伙人' },
	])
	
	// 学校名称
	const schoolName = ref('')
	
	// 届次选择
	let classTimes = ref('请选择')
	
	const actionsClassTime = ref([  
		{ name: '2029' },
		{ name: '2028' },
		{ name: '2027' },
		{ name: '2026' },
		{ name: '2025' },
		{ name: '2024' },
		{ name: '2023' },
		{ name: '2022' },
		{ name: '2021' },
	])
	
	let showClassTime = ref(false)
	
	let classTimeSelect =(e)=> {
		classTimes.value = e.name
	}
	
	// 跟进人筛选
	let staff = ref('请选择')
	
	const actionsStaff = ref([])
	
	let showStaff = ref(false)
	
	let staffSelect =(e)=> {
		staff.value = e.name
	}
	
	// 确认筛选
	let submitOptions = ()=>{
		uni.showToast({
			title: '筛选成功',
			icon: 'success',
			duration: 1000
		})
		showOptions.value = false
		setTimeout(function(){
			pageChange(1)
		},1000)
	}
	
	// 重置筛选
	let resetOptions= ()=>{
		console.log('重置');
		progressOptions.value.length = 0
		sourceOptions.value.length = 0
		gradeOptions.value.length = 0
		schoolName.value = ''
		classTimes.value = '请选择'
		staff.value = '请选择'
	}
	
</script>

<style lang="scss" scoped>
	
	/* =========导航栏========= */
	.topNav {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
	
	.nav-left {
		width: 20%;
		font-size: 36rpx;
		font-weight: 600;
	}
	
	.nav-center{
		width: 60%;
		height: 62rpx;
		padding-left: 25rpx;
		box-sizing: border-box;
		text-align: center;
		font-size: 40rpx;
	}
	 
	.nav-right {
		width: 20%;
		font-size: 36rpx;
		font-weight: 600;
		display: flex;
		justify-content: end;
	}
	 
	 /* =========搜索、筛选========= */
	.search{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 10rpx;
	}
	
	.input{
		width: 65%;
	}
	
	.arcoDesign{
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #9A9A9A;
	}
	
	/* =========内容========= */
	.tabsData{
		margin-top: 20rpx;
	}
	
	.tableDataItem{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1px solid #efefef;
	}
	
	.cardBody{
		display: inline-block;
		width: 88%;
	}
	
	.cardBodyTop{
		display: flex;
		align-items: center;
	}
	
	.cardBodyTopLeft{
		width: 80%;
		display: flex;
		justify-content: start;
		align-items: center;
	}
	
	.infoGrade,.infoSource{
		margin-left: 20rpx;
	}
	
	.infoName{
		color: rgb(16,16,16);
		font-size: 28rpx;
		font-family: PingFangSC-regular;
	}
	
	.cardBodyTopRight{
		width: 20%;
		font-size: 24rpx;
		text-align: right;
	}
	
	.cardBodyCenter{
		margin-top: 12rpx;
		height: 36rpx;
		line-height: 36rpx;
		color: rgba(154,154,154,1);
		font-family: PingFangSC-regular;
		font-size: 28rpx;
	}
	
	.cardBodyBottom{
		margin-top: 12rpx;
		height: 36rpx;
		line-height: 36rpx;
		color: rgba(154,154,154,1);
		display:flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
	}
	
	.classTime{
		width: 26%;
	}
	
	.college{
		width: 72%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.noData{
		width: 444rpx;
		height: 444rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	
	/* 滚动 */
	.scroll-Y {
		// height: 1200rpx;
		height: calc(100vh - 590rpx);
		margin-top: -10rpx;
	}
	
	/* 全选 */
	.radio{
		padding: 20rpx;
		border-bottom: 1px solid #efefef;
	}
	
	/* 确认 */
	.submit{
		height: 100rpx;
		padding:10rpx 35rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.left{
		color: #4F4F4F;
	}
	
	.staffBg{
		margin:0 30rpx;
		border-bottom: 1rpx solid rgba(127,127,127,.2);
		height: 70rpx;
		line-height: 70rpx;
	}
	
	.staffItem{
		width: 100%;
		text-align: center;
	}
	
	.progress{
		text-align: left;
		margin:24rpx 0 12rpx 24rpx;
	}
	
	.gradeItem{
		display: inline-block;
		width: 22%;
		margin-left: 10rpx;
		border: 1px solid #ccc;
	}
	
</style>
